<template>
    <el-select v-model="currentVal" :disabled="disabled" @change="changeHandle" :clearable="clearable"
               :placeholder="placeholder" :multiple="multiple">
        <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
</template>

<script>
    import {mapState} from 'vuex';

    /**
     * 角色选择器
     * @author Canaan
     * @date 2019/7/25 17:56.
     */
    export default {
        name: 'RoleSelect',
        mounted() {

        },
        components: {},
        props: {
            value: undefined,
            clearable: {
                type: Boolean,
                default: true,
            },
            disabled: {
                type: Boolean,
                default: false
            },
            multiple: {
                type: Boolean,
                default: false
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            hideOptions: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                currentVal: this.value
            }
        },
        computed: {
            // ...mapState({
            //     options:'role'
            // }),
            ...mapState([
                'role'
            ]),
            options() {
                //过滤掉未实现的角色
                return this.role.filter((val) => {
                    return this.hideOptions.indexOf(val.value) === -1;
                });
            }
        },
        methods: {
            changeHandle(val) {
                this.$emit("input", val);
                this.$emit("change", val);
            }
        },
        watch: {
            value(val) {
                this.currentVal = val;
            }
        },
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style scoped>

</style>